<template>
  <div class="my-forget-page">
    <nav-bar title="忘记密码" theme="black" border></nav-bar>
    <div class="my-password-main page-main" style="margin-top: 44px">
      <div class="my-password-step-container">
        <van-row :gutter="2">
          <van-col :span="12" align="center">
            <div class="my-password-step" :class="{ active: step === '1' }">
              <div class="my-password-step--line"></div>
              <p class="my-password-step--text">验证手机号</p>
            </div>
          </van-col>
          <van-col :span="12" align="center">
            <div class="my-password-step" :class="{ active: step === '2' }">
              <div class="my-password-step--line"></div>
              <p class="my-password-step--text">重置密码</p>
            </div>
          </van-col>
        </van-row>
      </div>
      <van-form validate-trigger="onSubmit" :show-error="false" @submit="onSubmit" v-if="step === '1'">
        <van-field size="large" v-model="formParams.loginName" placeholder="请输入手机号" :rules="rules.loginName" />
        <van-field
          size="large"
          v-model="formParams.validateCode"
          placeholder="请输入验证码"
          :rules="rules.validateCode"
        >
          <template #button>
            <van-button
              size="small"
              plain
              type="info"
              native-type="button"
              :disabled="formParams.loginName.length !== 11 || sendDisabled"
              @click="send(formParams.loginName)"
            >
              {{ sendText }}
            </van-button>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button block type="info" native-type="submit">下一步</van-button>
        </div>
      </van-form>
      <van-form validate-trigger="onSubmit" :show-error="false" @submit="nextOnSubmit" v-if="step === '2'">
        <van-field
          size="large"
          :type="newPassWordVisible ? 'text' : 'password'"
          :right-icon="newPassWordVisible ? 'eye' : 'closed-eye'"
          v-model="formParams.newPassWord"
          placeholder="请输入新密码"
          :rules="rules.newPassWord"
          @click-right-icon="newPassWordVisible = !newPassWordVisible"
        />
        <van-field
          size="large"
          :type="verifyPassWordVisible ? 'text' : 'password'"
          :right-icon="verifyPassWordVisible ? 'eye' : 'closed-eye'"
          v-model="formParams.verifyPassWord"
          placeholder="再次输入新密码"
          :rules="rules.verifyPassWord"
          @click-right-icon="verifyPassWordVisible = !verifyPassWordVisible"
        />
        <div style="margin: 16px">
          <van-button block type="info" native-type="submit" :loading="button.loading" :disabled="button.disabled">
            {{ button.text }}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import My from '@/api/my'
import { phoneReg, passWordReg } from '@/libs/regexp'
import SendCode from '@/mixins/sendCode'
export default {
  mixins: [SendCode],
  data() {
    const verifyPassWordValidator = () => {
      return this.formParams.verifyPassWord === this.formParams.newPassWord
    }
    return {
      step: '1',
      formParams: {
        loginName: '',
        validateCode: '',
        newPassWord: '',
        verifyPassWord: ''
      },
      rules: {
        loginName: [
          { required: true, message: '请输入手机号' },
          { pattern: phoneReg, message: '请输入正确的手机号' }
        ],
        validateCode: [{ required: true, message: '请输入验证码' }],
        newPassWord: [
          { required: true, message: '请输入密码' },
          { pattern: passWordReg, message: '请输入6-10位的字母与数字组合' }
        ],
        verifyPassWord: [
          { required: true, message: '请再次输入密码' },
          { validator: verifyPassWordValidator, message: '密码不一致' }
        ]
      },
      newPassWordVisible: false,
      verifyPassWordVisible: false,
      button: {
        disabled: false,
        loading: false,
        text: '确定'
      }
    }
  },
  created() {},
  methods: {
    onSubmit() {
      My.Password.checkVerification(this.formParams).then(res => {
        const { status } = res.data
        if (status === 0) {
          this.step = '2'
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    nextOnSubmit() {
      this.button.disabled = true
      this.button.loading = true
      this.button.text = '提交中...'
      My.Password.updatePasswordBefore(this.formParams)
        .then(res => {
          this.button.disabled = false
          this.button.loading = false
          this.button.text = '确定'
          const { status } = res.data
          if (status === 0) {
            this.$toast.success('修改成功')
            this.$router.push('/login')
          } else {
            this.$toast.fail(res.data.message)
          }
        })
        .catch(() => {
          this.button.disabled = false
          this.button.loading = false
          this.button.text = '确定'
        })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/my/password.less';
</style>
